<template>
  <div>
    <el-container>
      <el-main>
        <div style="width: 50%; margin: 0 auto" v-loading="loading">
          <el-card
            class="box-card"
            shadow="hover"
            v-for="item in orders"
            :key="item.orderId"
          >
            <div class="text item">
              <div class="picture">
                <img
                  :src="item.poster"
                  :alt="item.name"
                  style="width: 100px; height: 100px"
                />
              </div>
              <div class="info">
                <span style="font-size: 15px; font-weight: 600">{{
                  item.name
                }}</span
                ><br />
                价格 <span style="color: coral">{{ item.price }}</span
                ><br />
                购买时间 <span>{{ item.createTime }}</span
                ><br />
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelete(item.orderId)"
                  >删除</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import * as order from "@/api/order";
import store from "../../store";
export default {
  name: "",
  data() {
    return {
      orders: [],
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获得订单列表
    getList() {
      const params = {
        userId: store.getters.getUserId,
      };
      this.loading = true;
      order.getList(params).then((response) => {
        if (response.result.goodsView != null) {
          this.orders = response.result.goodsView.map((item) => {
            return {
              orderId: item.orderId,
              name: item.name,
              price: item.price,
              poster: item.poster,
              description: item.description,
              createTime: item.createTime,
            };
          });
        }
        this.loading = false;
      });
    },
    //删除订单
    handleDelete(orderId) {
      const params = { orderId };
      order.del(params).then((response) => {
        this.$message({ type: "success", message: response.result });
        this.orders.splice(
          this.orders.findIndex((e) => e.orderId === orderId),
          1
        ); // 删除数组中的指定元素
      });
    },
  },
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-top: 10px;
}
.picture {
  float: left;
}
.info {
  text-align: left;
  margin-left: 110px;
}
</style>